<template>
  <div class="pdf_con" ref="pdfStyle">
    <div id="pdfContainer" class="container"></div>
    <!-- 关闭按钮 -->
    <!-- <div class="btn-close" @click="closePdfPreview">
      <img src="@/assets/images/common/close.png" alt="" />
    </div> -->
    <!--功能按钮区-->
    <div class="btn-group">
      <van-button type="info" icon="add-o" size="mini" @click="onZoomIn">放大</van-button>
      <van-button type="info" icon="minus" size="mini" @click="onZoomOut">缩小</van-button>
      <van-button type="info" icon="el-icon-help" size="mini" @click="onZoomFit">还原</van-button>
    </div>
    <van-loading class="loading" color="#0094ff" size="24px" vertical v-if="loading">加载中...</van-loading>
  </div>
</template>

<script>
import PDFJS from 'pdfjs-dist'
import 'pdfjs-dist/web/pdf_viewer.css'
PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.workers.js'
var container
export default {
  name: 'PdfView',
  components: {},
  props: {
    url: {
      type: String,
      default: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
    },
    id: {
      type: String,
      default: '0',
    },
  },
  data() {
    return {
      scale: 1,
      zoomRange: 0.4, //比例变化范围
      contentId: `container${this.id || ''}`,
      loading: false,
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.getPDF(this.url)
  },
  methods: {
    async getPDF(url) {
      let pdf = await PDFJS.getDocument(url)
      container = document.getElementById('pdfContainer')

      container.innerHTML = ''
      for (let i = 1; i <= pdf.numPages; i++) {
        try {
          await this.rendPDF(pdf, i)
        } catch (e) {
          console.error(e)
        }
      }
    },
    async rendPDF(pdf, num) {
      let page = await pdf.getPage(num)
      // 设置展示比例
      let scale = this.scale
      let maxWidth = this.$refs.pdfStyle.clientWidth
      let viewport = page.getViewport((maxWidth / page.getViewport(1).width) * this.scale)
      let pageDiv = document.createElement('div')
      pageDiv.setAttribute('id', 'page-' + (page.pageIndex + 1))
      pageDiv.setAttribute('style', 'position: relative;left:0;width:100%')
      container.appendChild(pageDiv)
      let canvas = document.createElement('canvas')
      pageDiv.appendChild(canvas)
      let context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width - 3
      let renderContext = {
        canvasContext: context,
        viewport: viewport,
      }

      await page.render(renderContext)
    },
    /**
     * Zoom in page.
     */
    onZoomIn() {
      this.scale += this.zoomRange
      this.getPDF(this.url)
    },

    /**
     * Zoom out page.
     */
    onZoomOut() {
      this.scale -= this.zoomRange
      this.getPDF(this.url)
    },
    /**
     * Zoom fit page.
     */
    onZoomFit() {
      this.scale = 1
      this.getPDF(this.url)
    },
    // 关闭文件预览
    closePdfPreview() {
      // sessionStorage.removeItem('pdfurl')
      // this.$router.go(-1)
    },
  },
}
</script>

<style scoped lang="scss">
.pdf_con {
  height: calc(100% - 80px);
  position: relative;
  padding-bottom: 0.5rem;
  width: 100%;
  overflow: auto;
  .container {
    width: 100%;
    background-color: #fff;
    /deep/ .textLayer {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      height: 100%;
    }
  }
  .btn-group {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding-bottom: 10px;
  }
  .btn-close {
    position: absolute;
    top: 6px;
    right: 6px;
    img {
      width: 24px;
    }
  }
  .loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
